<template>
    <el-row :gutter="20">
        <el-col :span="18" class="contract">
            <el-form ref="ruleFormRef" :model="ruleForm" >
                <el-descriptions border :column="2">
                    <el-descriptions-item :span=2>
                        <template #label>
                            <div class="cell-item" style="width: 20px;">　　　　　</div>
                        </template>
                        <el-descriptions border :column="2">
                            <el-descriptions-item label="项目名称　　　　　" :span="2"><div style="width: 100%" ><component :is="projectSelect" :data = ruleForm.project_id @onProjectSelect="onProjectSelect" /></div></el-descriptions-item>
                            <el-descriptions-item label="区域" ><div style="width: 240px" ><el-input v-model="ruleForm.area"  /></div></el-descriptions-item>
                            <el-descriptions-item label="税率　　　　　　　">
                                <el-select style="width: 240px;" v-model="ruleForm.tax_rate" placeholder="请选择">
                                    <el-option label="请选择" value="" />
                                    <el-option label="1%" :value="1" />
                                    <el-option label="3%" :value="3" />
                                    <el-option label="6%" :value="6" />
                                    <el-option label="9%" :value="9" />
                                    <el-option label="13%" :value="13" />
                                </el-select>
                            </el-descriptions-item>
                        </el-descriptions>
                    </el-descriptions-item>

                    <el-descriptions-item :span=2>
                        <template #label>
                            <div class="cell-item" style="width: 20px;">　　　　　</div>
                        </template>
                        <el-descriptions border :column="2">
                            <el-descriptions-item label="单位　　　　　　　"><div style="width: 240px;" ><el-input v-model="ruleForm.unit"  /></div></el-descriptions-item>
                            <el-descriptions-item label="单价　　　　　　　"><div style="width: 240px;" > <el-input-number style="width: 240px;" :precision="2" v-model="ruleForm.price" :min="1" /></div></el-descriptions-item>
                            <el-descriptions-item label="是否含辅材"><div style="width: 240px;" ><el-input v-model="ruleForm.auxiliary_materials"  /></div></el-descriptions-item>
                            <el-descriptions-item label="工程地点　　　　　"><div style="width: 240px;" ><el-input v-model="ruleForm.address"  /></div></el-descriptions-item>
                            <el-descriptions-item label="班组"><div style="width: 240px;" ><el-input v-model="ruleForm.team_supplier"  /></div></el-descriptions-item>
                            <el-descriptions-item label="等级　　　　　　　"><div style="width: 240px;" ><el-input v-model="ruleForm.grade"  /></div></el-descriptions-item>
                            <el-descriptions-item label="联系人　　　　　　"><div style="width: 240px;" ><el-input v-model="ruleForm.contact"  /></div></el-descriptions-item>
                            <el-descriptions-item label="联系方式　　　　　"><div style="width: 240px;" ><el-input v-model="ruleForm.contact_mobile"  /></div></el-descriptions-item>
                            <el-descriptions-item label="备注　　　　　　　" :span="2"><el-input v-model="ruleForm.remarks" :rows="4" type="textarea" :autosize="{ minRows: 4 }" /></el-descriptions-item>
                        </el-descriptions>
                    </el-descriptions-item>
                </el-descriptions>
            </el-form>
        </el-col>
    </el-row>
        
    <div class="text-center mt30">
        <el-button type="primary" @click="submitForm(ruleFormRef)" :loading="loading"> 保存 </el-button>
        <el-button type="info" @click="router.go(-1)"> 返回 </el-button>
        <component :is="applyButton" model = "Supplier" :source = "source" type = "apply" :id = id :price="0" />
        <component :is="applyRevoke" model = "Supplier" :source = "source" :id = id />
        <!-- <el-button @click="printElement"> 打印预览 </el-button> -->
    </div>

</template>
  
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import http from '../../../util/request';
import { ElMessage, FormInstance } from 'element-plus';
import router from '../../../router';
import applyButton from "@/components/applyButton.vue";
import applyRevoke from "@/components/applyRevoke.vue";
import projectSelect from "@/components/projectSelect.vue";

const source = ref('Supplier')

const loading = ref<boolean>(false)
const ruleFormRef = ref<FormInstance>()
const id:any = ref(useRouter().currentRoute.value.params.id)
interface Project {
    id: number
    title: string
}
const Project = ref<Project>({id:0,title:''})
let data:any = sessionStorage.getItem('project')
Project.value = JSON.parse(data);
let user:any = sessionStorage.getItem('user')
user = JSON.parse(user)

const ruleForm = ref<any>({})

const submitForm = async (formEl: FormInstance | undefined) => {
    console.log(ruleForm.value)
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            loading.value = true
            let request:any = null
            if(ruleForm.value.id){
                request = http.patch('/reference/manual',ruleForm.value)
            }else{
                ruleForm.value.material_id = id.value
                request = http.put('/reference/manual',ruleForm.value)
            }
            request.then((response:any)=>{
                loading.value = false
                if(response.data.code != 200){
                    ElMessage.error(response.data.msg);
                    return
                }
                ElMessage.success(response.data.msg);
                id.value = response.data.data.id
                getData()
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}

const getData = () => {
    if(id.value == 0){
        return;
    }
    http.get('/reference/manual/'+id.value).then((response:any)=>{
        if(response.data.data){
            ruleForm.value = response.data.data
            ruleForm.value.price = parseInt(ruleForm.value.price)
        }
    })
}

const onProjectSelect = (data:number) => {
    ruleForm.value.project_id = data
}

onMounted(()=>{
    getData()
})

</script>
<style scoped>
.contract{height: calc(100vh - 25vh);overflow-y: scroll;}
.b_ .el-input{width: 340px;}
</style>
